<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy, see www.w3.org" />
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="SyntaxHighlighter.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<p><img src="saibamais.jpg" width="270" height="50"
alt="Saiba Mais" /></p>

<p><strong>Recomenda&ccedil;&atilde;o 2.15 -</strong> Usar o
elemento &ldquo;label&rdquo; juntamente com o atributo
&ldquo;id&rdquo; para associar os <strong></strong>r&oacute;tulos
aos respectivos controles dos formul&aacute;rios. Assim, os
leitores de tela associar&atilde;o os elementos do
formul&aacute;rio de forma correta. Usando o comando
&ldquo;label&rdquo; as pessoas que usam leitores de tela n&atilde;o
ter&atilde;o problemas ao ler o formul&aacute;rio. Caso haja grupos
de informa&ccedil;&atilde;o, controles, etc, a estes devem estar
devidamente diferenciados, seja por meio de espa&ccedil;amento,
localiza&ccedil;&atilde;o ou elementos gr&aacute;ficos.</p>

<p>Em uma aplica&ccedil;&atilde;o, os r&oacute;tulos dos campos
s&atilde;o posicionados, consistentemente, &agrave; esquerda do
campo mostrado, os r&oacute;tulos dos &iacute;cones posicionados
abaixo do &iacute;cone mostrado e r&oacute;tulos para bot&otilde;es
de r&aacute;dio s&atilde;o posicionados, consistentemente, &agrave;
direita.</p>

<p>Nota: Aten&ccedil;&atilde;o especial deve ser dispensada na
diferencia&ccedil;&atilde;o visual entre r&oacute;tulo e
informa&ccedil;&atilde;o colocados pr&oacute;ximos uns dos
outros.</p>

<p><strong><img src="2.16.jpg"
alt="caixa de verifica&ccedil;&atilde;o" width="260"
height="136" /></strong></p>

<p><strong>No c&oacute;digo html:</strong></p>

<div class="dp-highlighter">
<ol class="dp-j" start="1">
<li class="alt"><span>&lt;fieldset&gt;</span></li>

<li class=""><span>&nbsp; &lt;legend
align="top"&gt;Op&ccedil;&otilde;es de Turno&lt;/legend&gt;<br />
</span></li>

<li class="alt"><span>&nbsp; &lt;input type="checkbox" name="opt1"
id="opt1" value="mn"&gt; &lt;label for="opt1"&gt; Turno da
Manh&atilde;&lt;/label&gt;&lt;br /&gt;</span></li>

<li class=""><span>&nbsp; &lt;input type="checkbox" name="opt2"
id="opt2" value="td"&gt; &lt;label for="opt2"&gt;Turno da Tarde
&lt;/label&gt;&lt;br /&gt;</span></li>

<li class="alt"><span>&nbsp; &lt;input type="checkbox" name="opt3"
id="opt3" value="nt"&gt; &lt;label for="opt3"&gt; Turno da
Noite&lt;/label&gt;&lt;br /&gt;</span></li>

<li class=""><span>&nbsp; &lt;input type="checkbox" name="opt4"
id="opt4" value="md"&gt; &lt;label for="opt4"&gt;Turno da
Madrugada&lt;/label&gt;&lt;br&gt;</span></li>

<li class="alt"><span>&lt;/fieldset&gt;</span></li>
</ol>
</div>

<p>Caso o formul&aacute;rio seja em duas colunas, os r&oacute;tulos
de tamanhos significativamente diferentes devem estar alinhados
&agrave; direita com os campos alinhados &agrave; esquerda, em
todos os formul&aacute;rios do sistema.</p>
</body>
</html>